<!-- 用户管理 -->

<style lang='scss' type='stylesheet/scss' scoped>
@import "@/assets/scss/mixin.scss";
.users-warpper {
  text-align: center;
  font-size: 0;
  height: 100%;
  .users-item-header {
    margin-bottom: 11px;
    display: flex;
    line-height: 1.5;
    .icon {
      flex: 0 0 40px;
      cursor: pointer;
    }
    .el-icon-success {
      display: inline-block;
      font-size: 16px;
      line-height: 1.5;
      &.default {
        opacity: 0.7;
        color: #7e7e7e;
      }
      &.active {
        color: rgb(55, 160, 55);
      }
    }
    .username {
      font-size: 16px;
      flex: 1;
    }
    .status {
      font-size: 16px;
      flex: 1;
    }
    .createTime {
      font-size: 16px;
      flex: 1;
    }
  }
  .users-item {
    line-height: 1.5;
    &:nth-child(2n - 1) {
      background: #dfdfdf;
    }
    label {
      cursor: pointer;
      width: 100%;
      display: flex;
      .el-icon-success {
        padding: 10px 0;
        display: inline-block;
        font-size: 16px;
        flex: 0 0 40px;
        line-height: 1.5;
        &.default {
          opacity: 0;
          color: #7e7e7e;
        }
        &.active {
          color: rgb(55, 160, 55);
        }
      }
      .username {
        padding: 10px 0;
        font-size: 16px;
        flex: 1;
      }
      .status {
        padding: 10px 0;
        font-size: 16px;
        flex: 1;
        color: #797979;
      }
      .createTime {
        padding: 10px 0;
        font-size: 16px;
        flex: 1;
        color: #797979;
      }
      .handler {
        padding: 10px 0;
        font-size: 16px;
        flex: 1;
        color: #151515;
      }
    }
  }
}

.scroll {
  height: calc(100% - 77px);
}
.button-warpper {
  text-align: left;
}
.top-button + .top-button + .top-button {
  border-left: solid 1px #393939;
}
.top-button + .top-button {
  width: 100px;
  margin-right: 0;
}
.top-button {
  width: 120px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  margin-bottom: 12px;
  display: inline-block;
  margin-right: 12px;
}
.p-normal-input {
  width: 100%;
}

.create-button {
  margin-top: 22px;
}
</style>

<template>
  <div v-loading="loading">
    <ul class="users-warpper">
      <div class="button-warpper">
        <div class="p-normal-button top-button"
             @click="maskVisible=true"> <i class="el-icon-plus"></i> 添加新用户</div>
        <div class="p-normal-button top-button"
             @click="handlerAllDisabled(false)"> 禁用</div>
        <div class="p-normal-button top-button"
             @click="handlerAllDisabled(true)"> 取消禁用</div>
      </div>
      <li class="users-item-header">
        <input type="checkbox"
               name="select"
               hidden
               @change="changeCheckAll"
               id="checkbox"
               class="select"
               v-model="checkAll">
        <label for="checkbox"
               class="icon">
          <i class="el-icon-success"
             :class="`${checkAll?'active':'default'}`"></i>
        </label>
        <span class="username">Username</span>
        <span class="status">Status</span>
        <span class="createTime">Create Time</span>
        <span class="createTime">Handler</span>
      </li>
      <el-scrollbar class="scroll">
        <li class="users-item"
            v-for="(item,key) in userList"
            :key="item.id">
          <label :for="item.id">
            <input type="checkbox"
                   name="select"
                   v-model="select"
                   hidden
                   :id="item.id"
                   :value="+item.id">
            <i class="el-icon-success"
               :class="`${select.includes(+item.id)?'active':'default'}`"></i>
            <span class="username">{{item.uname}}</span>
            <span class="status">{{!item.status?"已禁用":"未禁用"}}</span>
            <span class="createTime">{{item.createdAt|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            <span class="handler"
                  @click.prevent="changeStatus(item)">{{!item.status?"取消禁用":"禁用"}}</span>
          </label>
        </li>
      </el-scrollbar>
    </ul>
    <mymask title="新增用户"
            :visible.sync="maskVisible"
            v-if="maskVisible">
      <input type="text"
             v-model="username"
             class="p-normal-input"
             placeholder="USER NAME">
      <div class="p-normal-button create-button"
           @click="confirmAdd">确认新增</div>
    </mymask>
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  watch: {
    select(newVal) {
      this.checkAll = newVal.length === this.userList.length;
    }
  },
  data() {
    return {
      select: [],
      checkAll: false,
      username: "",
      maskVisible: false,
      userList: [],

      loading: false
    };
  },
  async created() {
    // 获取用户列表
    this.getUserList();
  },
  methods: {
    // 获取用户列表
    async getUserList() {
      try {
        this.loading = true;
        let list = await this.$axios.post({
          url: "/user/get-user-list"
        });
        this.loading = false;

        this.userList = list.data;
      } catch (error) {
        this.loading = false;
        this.$notify.error({
          title: "错误",
          message: error || ""
        });
      }
    },
    // 点击全选按钮
    changeCheckAll() {
      if (this.checkAll) {
        this.select = this.userList.map(e => e.id);
      } else {
        this.select = [];
      }
    },
    // 批量更改状态
    async handlerAllDisabled(status) {
      try {
        this.loading = true;
        this.$axios.post({
          url: "user/change-status",
          data: {
            idArray: this.select,
            status
          }
        });
        this.loading = false;

        this.userList.forEach(e => {
          if (this.select.includes(+e.id)) {
            e.status = status;
          }
        });

        this.$notify.success({
          title: "成功",
          message: "设置成功"
        });
      } catch (error) {
        this.loading = false;
        this.$notify.error({
          title: "错误",
          message: error || "错误"
        });
      }
    },
    // 更改单个状态
    async changeStatus(item) {
      this.loading = true;
      await this.$axios.post({
        url: "/user/change-status",
        data: {
          idArray: [item.id],
          status: item.status
        }
      });
      this.loading = false;

      this.$notify.success({
        title: "成功",
        message: "更新成功"
      });

      item.status = !item.status;
    },
    async confirmAdd() {
      if (!this.username.trim()) {
        this.$notify({
          title: "警告",
          message: "请输入用户名",
          type: "warning"
        });
        return;
      }

      this.loading = true;
      await this.$axios.post({
        url: "user/add-user",
        data: {
          uname: this.username.trim()
        }
      });
      this.loading = false;

      this.getUserList();
      this.$notify({
        title: "成功",
        message: "新增用户成功",
        type: "success"
      });
      this.username = "";
      this.maskVisible = false;
    }
  }
};
</script>

